<template>
  <div>
    <div class="header flex justify-between items-center">
      <div class="flex items-center justify-between">
        <el-input :model-value="input" placeholder="根据名称查询" />
        <el-input :model-value="input" placeholder="根据入库人查询" />
        <el-input :model-value="input" placeholder="Please input" />
        <el-button type="primary" :icon="Search" class="btn-green" @click="handleSearch()">查询</el-button>
      </div>
    </div>
    <el-table :data="tableData" stripe style="min-height: 40rem">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="price" label="单价(元)" sortable />
      <el-table-column prop="buyDate" label="购买日期" />
      <el-table-column prop="totalRegister" label="累计入库" sortable />
      <el-table-column prop="registerDate" label="入库时间" />
      <el-table-column prop="stockNumber" label="当前库存" sortable />
      <el-table-column prop="registerPerson" label="入库人" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <div v-if="scope.row.status == 0" class="theme-success">{{ filterGoodsStatus(scope.row.status) }}</div>
          <div v-if="scope.row.status == 1" class="theme-warn">{{ filterGoodsStatus(scope.row.status) }}</div>
          <div v-if="scope.row.status == 2" class="theme-error">{{ filterGoodsStatus(scope.row.status) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="操作">
        <template #default="scope">
          <div class="theme-success">
            <el-button type="primary" link @click="checkForm()">查看</el-button>
            <el-button type="primary" link @click="checkForm()">申请</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination></Pagination>
  </div>
</template>

<script setup lang="ts">
import Pagination from "@/components/pagination/index.vue";
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
const input = ref("");

// 表单数据
const tableData = [
  {
    name: "中心笔",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    status: 0,
  },
  {
    name: "A4草稿纸",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    status: 1,
  },
  {
    name: "晨光彩虹马克笔",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    status: 2,
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    status: 1,
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    status: 2,
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    status: 0,
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    status: 1,
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    status: 1,
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    status: 2,
  },
  {
    name: "商品A",
    price: 80,
    buyDate: "2022年-8月-12日",
    totalRegister: 96,
    registerDate: "2022-8月-13日",
    registerPerson: "团组织-李一鳞",
    stockNumber: 56,
    status: 1,
  },
];

/**
 *  查询
 */
const handleSearch = () => {
  // TODO 调用 查询接口
  console.log("handleSearch");
};

/**
 * 查看
 */
const checkForm = () => {
  // TODO 弹出查看表单
};

/**
 * 编辑
 */
const editForm = () => {
  // TODO 弹出编辑表单
};

/**
 * 下架
 */
const suspendGoods = () => {
  // TODO 下架操作
  ElMessageBox.confirm(
    '当前操作会下架物资，是否继续？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '下架成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '下架失败',
      })
    })
}

let themeColor = ref('theme-success')  // 物资状态的颜色
/**
 * @param status 物资的库存状态，1:库存大于警戒线，2：库存介于警戒线和0之间,3：库存为0
 */
const filterGoodsStatus = (status: number): string => {
  if (status === 0) {
    return '可领用'
  } else if (status === 1) {
    return '库存紧张'
  } else {
    return '暂无库存'
  }
}
</script>

<style scoped lang="scss">
.header {
  height: 70px;

  .el-input {
    margin-right: 20px;
  }
}
</style>
